﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <link href="../../Scripts/ext-4.1-beta/resources/css/ext-all.css" type="text/css"
        rel="Stylesheet" />
    <script src="../../Scripts/ext-4.1-beta/ext-all-debug-w-comments.js" type="text/javascript"
        language="javascript"></script>       
         
    <script src="../../Scripts/Grids/GridPanelBaseCls-v1.0.js" type="text/javascript"
        language="javascript"></script>
    <script src="../../Scripts/Grids/LanWatchGridPanelBase-v1.0.js" type="text/javascript"
        language="javascript"></script>
    <script language="javascript" type="text/javascript">

        Ext.Loader.setConfig({ enabled: true });
        Ext.Loader.setPath('Ext.ux', '../Scripts/ext-4.1-beta/ux');
        Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.ux.grid.FiltersFeature'            
        ]);






        Ext.onReady(function () {

            // configure whether filter query is encoded or not (initially)
            var encode = false;

            // configure whether filtering is performed locally or remotely (initially)
            var local = true;

            var filters = {
                ftype: 'filters',
                // encode and local configuration options defined previously for easier reuse
                encode: encode, // json encode the filter query
                local: local,   // defaults to false (remote filtering)

                // Filters are most naturally placed in the column definition, but can also be
                // added here.
                filters: [
            {
                type: 'boolean',
                dataIndex: 'visible'
            }
        ]
            };

            var mainControllerLink = '/Home/';
            var personModel = Ext.define('Person', {
                extend: 'Ext.data.Model',
                fields: ['Id', 'FName', 'LName', 'City', 'Country', 'ZipCode']
            });    //End of define

            allAgentsGrid = new LanWatch.Grids.LanWatchGridPanelBaseCls({
                id: 'managedAgentsGrid',
                features: [filters],
                columns: [{ name: 'Id', header: 'Id', dataIndex: 'Id', hidden: false, filterable: true },
                        {
                            header: 'First Name',
                            dataIndex: 'FName',
                            hidden: false,
                            width: 50,
                            resizable: false,
                            filterable: true
                        },
                        {
                            header: 'Last Name',
                            editable: false,
                            name: 'LName',
                            dataIndex: 'LName',
                            width: 50
                        },
                        {
                            header: 'City',
                            dataIndex: 'City',
                            width: 270,
                            filterable: true
                        }], // End of if (!this.columns) 			
                url: mainControllerLink + 'GetData',
                root: '',
                model: personModel,
                idProperty: 'Id',
                totalProperty: 'Total'
            });
            allAgentsGrid.store.load();

            var win = new Ext.window.Window({
                id: 'testWindow',
                frame: false,
                border: false,
                draggable: true,
                layout: 'fit',
                closable: true,
                closeAction: 'hide',
                buttonAlign: 'center',
                //autoWidth: true,
                width: 500,
                autoHeight: true,
                //height: 700,
                title: 'Lan Watch: Configure a Probe',
                items: [allAgentsGrid]
            });
            win.show();
        });
    </script>
</head>
<body>
    <div>
        <script language="javascript" type="text/javascript">

            // Set up a model to use in our Store
//            Ext.define('User', {
//                extend: 'Ext.data.Model',
//                fields: [
//        { name: 'firstName', type: 'string' },
//        { name: 'lastName', type: 'string' },
//        { name: 'age', type: 'int' },
//        { name: 'eyeColor', type: 'string' }
//    ]
//            });

//            var myStore = Ext.create('Ext.data.Store', {
//                model: 'User',
//                data: [
//        { firstName: 'Ed', lastName: 'Spencer' },
//        { firstName: 'Tommy', lastName: 'Maintz' },
//        { firstName: 'Aaron', lastName: 'Conran' },
//        { firstName: 'Jamie', lastName: 'Avins' }
//    ]
//            });

//            var grid = Ext.create('AhmadLab.GridWMultiSelect', {
//                store: myStore,
//                columns: [{ header: 'First Name', dataIndex: 'firstName', menuDisabled: true }, { header: 'Last Name', dataIndex: 'lastName'}],
//                selModel: Ext.create('Ext.selection.CheckboxModel', {
//                    mode: 'MULTI'
//                })
//            });
            
    

        </script>
    </div>
</body>
</html>
